<template>
	<div class="cont">
		<div class="top">
			<div>
				<el-radio-group v-model="radio1" size="small">
				      <el-radio-button label="今天"></el-radio-button>
				      <el-radio-button label="近24小时"></el-radio-button>
				      <el-radio-button label="昨天"></el-radio-button>
				      <el-radio-button label="近3天"></el-radio-button>
				      <el-radio-button label="近7天"></el-radio-button>
				      <el-radio-button label="近1月"></el-radio-button>
				</el-radio-group>
			</div>
			<div style="display: flex;">
			<el-select v-model="value" placeholder="请选择" size="small" style="width: 120px;">
				<el-option
				  v-for="item in options"
				  :key="item.label"
				  :label="item.label"
				  :value="item.value">
				</el-option>
			</el-select>
			 <el-input
			    placeholder="请输入关键词"
			    v-model="input4"
				size="small" clearable style="width: 180px;margin-left: 10px;">
			    <i slot="prefix" class="el-input__icon el-icon-search"></i>
			  </el-input>
			</div>
		</div>
		<div class="shaixuan" v-if="tiaojian">
			<div style="display: flex;justify-content: space-between;">
				<div style="display: flex;">
					<div style="min-width: 80px;color: #000;">
						信息来源：
					</div>
					<div>
						<el-checkbox-group v-model="checkList" style="display: flex;flex-wrap: nowrap;" size="mini">
						    <el-checkbox :label="item.label" v-for="item in optionsa" :key="item.label" style="margin-right: 25px !important; ">{{item.name}} ({{item.num}})</el-checkbox>  
						  </el-checkbox-group>
						 
					</div>
				</div>
				<div style="color: #396fff;" @click="qingkong" class="gouxuan">
					取消勾选
				</div>
			</div>
			<div style="margin-top: 20px;display: flex;">
				<div style="display: flex;align-items: center;">
					<div style="min-width: 80px;color: #000;">
						情感倾向：
					</div>
					<div>
						<el-checkbox-group v-model="checkListb" style="display: flex;flex-wrap: nowrap;align-items: center;" size="mini">
						    <el-checkbox :label="item.label" v-for="item in optionsb" :key="item.label" style="margin-right: 25px !important; ">{{item.name}} </el-checkbox>  
						  </el-checkbox-group>
						 
					</div>
				</div>
				<div style="display: flex;align-items: center;margin-left: 20px;" >
					<div style="display: flex;align-items: center;">
						<div style="min-width: 80px;color: #000;">
						信息重复：
						</div>
						
						<el-select v-model="valuec" placeholder="请选择" size="small" style="width: 100px;">
							<el-option
							  v-for="item in optionsc"
							  :key="item.label"
							  :label="item.label"
							  :value="item.value">
							</el-option>
						</el-select>
					</div>
				</div>
			</div>
		</div>
		<div style="height: 60px;line-height: 60px;" class="shaixuan">
			<div style="float: right;color: #396fff;" @click="shouqi" v-if="tiaojian==true">
				收起筛选
			</div>
			<div style="float: right;color: #396fff;" @click="zhankai" v-else>
				展开筛选
			</div>
			
		</div>
		<div style="display: flex; align-items: center;justify-content: space-between;padding-top: 15px;padding-bottom: 15px;border-top: 1px solid rgba(0, 0, 0, 0.1);border-bottom: 1px solid rgba(0, 0, 0, 0.1);">
			<div>
				共{{msgnum || '0'}}条
			</div>
			<div style="display: flex; align-items: center;">
				<div>
					排序：
				</div>
				
				<el-select v-model="msgtiaojain" placeholder="请选择" style="width: 100px;" size="small">
				    <el-option
				      v-for="item in msgtiaojianlist"
				      :key="item.label"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
			</div>
		</div>
		<div class="msg-con" >
			<div style="height: 430px;overflow-y: scroll;">
				<div style="display: flex;flex-wrap: wrap;">
					
			
				<div class="con-itema" v-for="item in msglist" :key="item.img" @click="toxiangqing(id)">
					<div style="display: flex;">
						<div class="left" style="position: relative;width: 140px;height: 190px;background-color: #dfdfdf;">
							<div style="position: absolute;left: 0;top: 0;z-index: 999;">
								<div v-if="item.type=='zheng'" class="typeaa" style="background-color: rgb(94, 188, 0);">正</div>
								<div  v-else-if="item.type=='zhong'" class="typeaa" style="background-color: rgb(36, 104, 242);">中</div>
								<div  v-else-if="item.type=='fu'" class="typeaa" style="background-color:rgb(255, 105, 102);">负</div>
							</div>
							<img :src="item.img" style="width:140px;heigh:190px;">
						</div>
						<div class="zhong">
							<div class="topa">
								 {{item.title}}
							</div>
							
							<div style="margin-top: 20px;font-size: 12px;border-top: 1px solid rgba(0,0,0,0.1);padding-left: 10px;padding-top: 10px;">
								<div style="">
									来源：{{item.laiyuan}}
								</div>
								<div  style="margin-top: 10px;">
									作者：{{item.autor}}
								</div>
								<div  style="margin-top: 10px;">
									发布时间：{{item.date}}
								</div>
								<div  style="margin-top: 10px;">
									相似信息：{{item.chongfu}}
								</div>
								
							</div>
						</div>
					</div>
				</div>
					</div>
			</div>
		
			<div class="fenye">
				<el-pagination
				  background
				  layout="prev, pager, next"
				  :total="15" style="margin-top: 15px;">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	

	export default{
		data(){
			return{
				msglist:[
					{   
						id:1,
						type:'zheng',
						title:' 山东省机场管理集团有限公司原党委委员、副总经理李伟严重违纪违法被开除党籍和公职#打虎拍蝇#反腐倡廉 ',
						img:require('@/assets/aaa.png'),
						laiyuan:'抖音',
						date:'2023-06-23 08:58',
						chongfu:'66',
						autor:'山东法制报'
					},
					{
						id:2,
						type:'fu',
						title:'重庆粮食集团原董事长胡君烈退休9年后被查「退休9年后被查的重庆粮食集团原董事长胡君烈被开除党籍：参与赌博，损公肥私」重庆粮食集团原董事长胡君烈被开除党籍日前，经重庆市委批准，重庆市纪委监委对重庆粮食集团原党委书记、董事长胡君烈严重违纪违法问',
						img:require('@/assets/bbb.png'),
						
						laiyuan:'好看视频',
						date:'2023-06-23 08:58',
						chongfu:'27',
						autor:' 经济观察报'
					},
					{
						id:3,
						type:'fu',
						title:'黑龙江省人大常委会原副主任宋希斌受贿、挪用公款案一审开庭',
						
						img:require('@/assets/ccc.png'),
						laiyuan:'抖音',
						date:'2023-06-23 08:58',
						chongfu:'55',
						autor:'我们视频'
					},	
					{   
						id:4,
						type:'zheng',
						title:'【一审宣判！#原国家粮食局副局长徐鸣获刑十五年】2023年6月20日，福建省厦门市中级人民法院公开宣判原国家粮食局党组成员、副局长徐鸣受贿、利用影响力受贿一案，对被告人',
						img:require('@/assets/ddd.png'),
						laiyuan:'抖音',
						date:'2023-06-23 08:58',
						chongfu:'46',
						autor:'北京日报'
					},
					{
						id:5,
						type:'zhong',
					
						title:'常德市副市长涂碧波涉嫌受贿犯罪，被开除党籍和公职',
						doc:'6月21日,据廉洁运城:山西省运城市煤矿机械厂原厂长万青龙涉嫌严重违法,经运城市监委指定,目前正接受绛县监委监察调查.万青龙简历万青龙,男,汉族,1965年12月生,山西新绛人,中专学历,1986年9月参加工作.',
						img:require('@/assets/eee.png'),
						laiyuan:' 好看视频',
						date:'2023-06-23 08:58',
						chongfu:'54',
						autor:'恒哥侃影视'
					}
				],
				msgnum:1500,
				msgtiaojain:'选项1',
				msgtiaojianlist:[{
				  value: '选项1',
				  label: '按相关性'
				}, {
				  value: '选项2',
				  label: '按时间降序'
				}, {
				  value: '选项3',
				  label: '按时间升序'
				}],
				tiaojian:true,
			
				input4:'',
				checkList:[],
				checkListb:[],
				radio1:'今天',
				options: [{
				  value: '选项1',
				  label: '全文'
				}, {
				  value: '选项2',
				  label: '标题'
				}],
				optionsc: [{
				  value: '选项1',
				  label: '不重复'
				}, {
				  value: '选项2',
				  label: '重复'
				}],
				value:'选项1',
				valuec:'选项1',
				optionsa:[
					{
						label:1,
						name:'抖音',
						num:'17270'
					},
					{
						label:2,
						name:'哔哩哔哩',
						num:'10'
					},
					{
						label:3,
						name:'好看视频',
						num:'686'
					},
					{
						label:4,
						name:'快手',
						num:'2'
					},
					{
						label:5,
						name:'全民视频',
						num:'14081'
					},
					{
						label:6,
						name:'搜狐视频',
						num:'7899'
					},
					{
						label:7,
						name:'网易视频',
						num:'18'
					},
			
				],
				optionsb:[
					{
						label:1,
						name:'正面',
					},
					{
						label:2,
						name:'中立',
					},
					{
						label:3,
						name:'负面',
					},
				]
			}
		},
		mounted(){
		
		},
		methods:{
			qingkong(){
				this.checkList=[]
			},
			shouqi(){
				this.tiaojian=!this.tiaojian
			},
			zhankai(){
				this.tiaojian=!this.tiaojian
			},
			toxiangqing(id){
				this.$router.push('/shishijiance/yuqingxinxi')
			}
		
		}
		
	}
	
</script>

<style lang="scss" scoped>
	.yuanwen  :hover {
		    cursor: pointer;
		}
	.shaixuan :hover {
		    cursor: pointer;
		}
	.gouxuan :hover {
		    cursor: pointer;
		}
	.top{
		width:100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.shaixuan{
		margin-top: 15px;
		font-size: 13px;
	}
	::v-deep .el-checkbox__label {
		font-size: 12px;
		color: #000;
	}
	.msg-con{
		height: 490px;
		padding-bottom: 20px;
		box-sizing:border-box;
	
		.con-itema{
			width: 325px;
			height: 190px;
			overflow: hidden;
			margin-right: 20px;
			margin-top: 20px;
			display: flex;
			justify-content: space-between;
			border: 1px solid rgba(0,0,0,0.1);
			// 	padding-top: 20px;
			// padding-bottom: 20px;
		}
	}
	.zhong{
		.topa{
			color: #000 !important;
			font-size: 13px;
			color: #333;
			width: 165px;
			margin-left: 10px;
			margin-top: 10px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
			
		}
	}
	.right{
		
		width: 340px;
		height: 90px;
		overflow: hidden;
		display: flex;
		align-items: center;
	}
	.typeaa{
		width: 25px;
		height: 25px;
		text-align: center;
		line-height: 25px;
		color: #fff;
		font-size: 13px;
	}
</style>